<template>
  <div v-loading="loading" v-empty="nopermission"
       class="rc-cont"
       xs-empty-icon="nopermission"
       xs-empty-text="暂无权限">
    <flexbox v-if="!isSeas" class="rc-head" direction="row-reverse">
      <el-button v-if="businessnSave"
                 class="xr-btn--orange rc-head-item"
                 icon="el-icon-plus"
                 type="primary"
                 @click="createClick">新建商机
      </el-button>
      <el-button v-if="canRelation" class="rc-head-item" type="primary"
                 @click="unRelevanceHandleClick">
        解除关联
      </el-button>
      <el-popover v-if="canRelation" v-model:visible="showRelativeView"
                  placement="bottom" width="700" popper-class="no-padding-popover"
                  trigger="click" style="margin-right: 20px;">
        <crm-relative ref="crmrelative"
                      v-model="showRelativeView"
                      :show="showRelativeView"
                      :radio="false"
                      :action="{ type: 'condition', data: { moduleType: 'customer', customerId: customerId } }"
                      :selected-data="{ 'business': list }"
                      crm-type="business"
                      @close="showRelativeView = false"
                      @changeCheckout="checkRelativeInfos"/>
        <template v-slot:reference>
          <el-button class="rc-head-item"
                     style="margin-right: 0;"
                     type="primary"
                     @click="showRelativeView = true">关联
          </el-button>
        </template>
      </el-popover>

    </flexbox>
    <el-table
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe
        style="width: 100%;border: 1px solid #E6E6E6;"
        @row-click="handleRowClick"
        @selection-change="selectionList = $event">
      <el-table-column
          v-if="canRelation && fieldList.length > 0"
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"/>
      <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :formatter="fieldFormatter"
          show-overflow-tooltip/>
    </el-table>

    <c-r-m-full-screen-detail
        v-model:visible="showFullDetail"
        :id="businessId"
        crm-type="business"
        @handle="detailHandle"/>
    <c-r-m-all-create
        v-if="isCreate"
        :action="createActionInfo"
        crm-type="business"
        @save-success="createSaveSuccess"
        @close="isCreate=false"/>
  </div>
</template>

<script setup>
import CRMAllCreate from '../SzCrud/CRMAllCreate.vue'
import {crmCustomerQueryBusinessAPI} from '/src/api/crm/customer.js'
import {
  crmContactsQueryBusinessAPI,
  crmContactsRelateBusinessAPI,
  crmContactsUnrelateBusinessAPI
} from '/src/api/crm/contacts.js'
import CrmRelative from '/src/components/CreateCom/CrmRelative.vue'
import {getPermissionByKey} from '/src/utils/index.js'
import {getCurrentInstance, ref, watch} from "vue";
import CRMFullScreenDetail from "/src/components/CRMFullScreenDetail.vue"
import compute from "@/views/admin/hrm/salary/Compute.vue";
import {useNumberHook} from "@/hooks/useNumberHook.js";

const {separator} = useNumberHook();
// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus

defineOptions({
  name: 'RelativeBusiness', // 相关联系人商机  可能再很多地方展示 放到客户管理目录下（新建时仅和客户进行关联）
})
const emits = defineEmits([])

const props = defineProps({
  /** 模块ID */
  id: [String, Number],
  /** 没有值就是全部类型 有值就是当个类型 */
  crmType: {
    type: String,
    default: ''
  },
  /** 是公海 默认是客户 */
  isSeas: {
    type: Boolean,
    default: false
  },
  /** 联系人人下 新建商机 需要联系人里的客户信息  合同下需要客户和商机信息 */
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const loading = ref(false)
const nopermission = ref(false)
const list = ref([])
const fieldList = ref([])
const tableHeight = ref('400px')
const showFullDetail = ref(false)
const isCreate = ref(false) // 控制新建
const businessId = ref('') // 查看全屏联系人详情的 ID
// 创建的相关信息
const createActionInfo = ref({type: 'relative', crmType: props.crmType, data: {}})
/**
 * 关联的逻辑
 */
const showRelativeView = ref(false) // 控制关联信息视图
const selectionList = ref([]) // 取消关联勾选的数据

const rootTabs = inject('rootTabs')

// 联系人下客户id获取关联商机
const customerId = computed(() => {
  return props.detail.customerId
})
// 是否能关联
const canRelation = computed(() => {
  return props.crmType == 'contacts'
})

const businessnSave = computed(() => {
  return !!getPermissionByKey('crm.business.save')
})


watch(() => props.id, (val) => {
  list.value = []
  getDetail()
})

watch(() => rootTabs.currentName, (val) => {
  if (val === 'RelativeBusiness') {
    getDetail(false)
  }
})

onMounted(() => {
  getDetail()
})

/**
 * 关联的数据
 */
function checkRelativeInfos(data) {
  if (data.data.length > 0) {
    const params = {contactsId: props.id}
    params.businessIds = data.data
        .map(item => {
          return item.businessId
        })
    crmContactsRelateBusinessAPI(params)
        .then(res => {
          getDetail()
          ElMessage.success({message: '操作成功'})
        })
        .catch(() => {
        })
  }
}

/**
 * 取消关联
 */
function unRelevanceHandleClick() {
  if (selectionList.value.length == 0) {
    ElMessage.error({message: '请先勾选数据'})
  } else {
    ElMessageBox.confirm('确认取消关联?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
        .then(() => {
          const params = {contactsId: props.id}
          params.businessIds = selectionList.value
              .map(item => {
                return item.businessId
              })
          crmContactsUnrelateBusinessAPI(params)
              .then(res => {
                getDetail()
                ElMessage.success({message: '操作成功'})
              })
              .catch(() => {
              })
        })
        .catch(() => {
        })
  }
}

/**
 * 获取字段信息
 */
function getFieldList() {
  fieldList.value.push({
    prop: 'businessName',
    width: '200',
    label: '商机名称'
  })
  fieldList.value.push({
    prop: 'money',
    width: '200',
    label: '商机金额'
  })
  fieldList.value.push({
    prop: 'customerName',
    width: '200',
    label: '客户名称'
  })
  fieldList.value.push({
    prop: 'typeName',
    width: '200',
    label: '商机组'
  })
  fieldList.value.push({prop: 'statusName', width: '200', label: '商机阶段'})
}

function fieldFormatter(row, column) {
  if (column.property == 'money') {
    return separator(row[column.property] || 0)
  }
  return row[column.property]
}

function getDetail(loading = true) {
  loading.value = loading
  const request = {
    contacts: crmContactsQueryBusinessAPI,
    customer: crmCustomerQueryBusinessAPI
  }[props.crmType]
  const params = {pageType: 0}
  params[props.crmType + 'Id'] = props.id
  request(params).then(res => {
    if (fieldList.value.length == 0) {
      getFieldList()
    }
    nopermission.value = false
    loading.value = false
    list.value = res.data.data.list
  }).catch(data => {
    if (data.code == 102) {
      nopermission.value = true
    }
    loading.value = false
  })
}

/**
 * 当某一行被点击时会触发该事件
 */
function handleRowClick(row, column, event) {
  if (column.property == 'businessName') {
    businessId.value = row.businessId
    showFullDetail.value = true
  }
}

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'businessName') {
    return 'can-visit--underline'
  } else {
    return ''
  }
}

/**
 * 新建
 */
function createClick() {
  // 客户 和 联系人 下可新建商机
  if (props.crmType == 'contacts') {
    createActionInfo.value.data['customer'] = props.detail
    createActionInfo.value.relativeData = {
      contactsId: props.detail.contactsId
    }
  } else if (props.crmType == 'customer') {
    createActionInfo.value.data['customer'] = props.detail
  }
  isCreate.value = true
}

/**
 * 创建成功刷新相关信息
 */
function createSaveSuccess() {
  if (canRelation.value) {
    cxt.refs.crmrelative.refreshList()
  } else {
    bus.emit('crm-tab-num-update')
    getDetail()
  }
}

/**
 * 详情操作
 */
function detailHandle(data) {
  if (data.type === 'delete') {
    getDetail()
    nextTick(() => {
      bus.emit('crm-tab-num-update')
    })
  }
}

</script>


<script type="text/javascript">


export default {

  components: {

    // CRMAllCreate,
    // CrmRelative
  },
  mixins: [],
  props: {},
  data() {
    return {}
  },
  // inject: ['rootTabs'],
  computed: {},
  watch: {},
  mounted() {

  },
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '../../styles/relativecrm';
</style>
